import {defineConfig} from 'vite'

import postcssPresetEnv from 'postcss-preset-env'

import path from 'path'

import { ViteAliases } from 'vite-aliases'

export default defineConfig({
    resolve:{
        alias:{
            "@":path.resolve(__dirname,'./src'),
            "@assets":path.resolve(__dirname,'./src/assets')
        }
    },
    envPrefix:'ENV_',
    css:{//css相关配置

        //modules字段会传给postcss
        modules:{
            //假设css文件类名为footer-content，
            //在js中引入css文件后 `import componentACss from xxx`
            //设置camelCaseOnly，在js中使用 componentACss.footerContent 访问到该样式
            localsConvention:"camelCaseOnly",

            //全局样式global（css会以原本的类名插入页面style标签）、局部样式local（默认值。即开启css module）
            scopeBehaviour:"local",

            //scopeBehaviour是local,这个配置css module的每个样式名
            //name文件名，local原本的css类名，hash:5前五位哈希值 (参考：https://github.com/webpack/loader-utils#interpolatename)
            // generateScopedName:"[name]_[local]_[hash:5]"
            // generateScopedName:(name,fileName,css)=>{
            //     //name 原本的css类名,fileName 样式文件绝对路径, css 当前那个样式
            //     return `${name}_111`
            // }

            //相当于给hash加盐
            hashPrefix:'hello',

            //指定哪些样式文件不使用css module
            // globalModulePaths:['./components/componentA/index.module.less']
        },

        //key是预处理器名 ，value是该预处理器配置
        preprocessorOptions:{  
            less:{//这里的配置项其实就是less的命令行参数。参考：https://lesscss.org/usage/#less-options

                //等价于 lessc --math='always' xxx.less 。
                //less默认会括号中的进行数学运算 width:(100px/2) 
                //配置为always。就会将 width:100px/2 编译成 width:50px
                math:"always",

                //在global.less定义变量 @mainColor:'red' ，在index.less中想要使用需要@import url('./global.less)引入后才能使用
                //我们可以定义全局的变量，直接使用，不必再引入
                // globalVars:{
                //     mainColor:"red"
                // }
            }
        },

        //开启css的sourcemap功能
        devSourcemap:true,

        postcss:{
            plugins:[
                postcssPresetEnv()
            ]
        }

    },
    build:{//打包构建相关配置(vite build)
        rollupOptions:{//配置rollup的构建策略。rollup文档：https://www.rollupjs.com/guide/big-list-of-options#%E6%A0%B8%E5%BF%83%E5%8A%9F%E8%83%BD-core-functionality
            output:{
                //rollup的assetFileNames配置。该选项用于自定义构建结果中的“静态文件”名称
                //配置文档：https://www.rollupjs.com/guide/big-list-of-options#outputassetfilenames
                //经过实际测试，[assetFileNames]仅仅能指定非js的静态资源的输出路径及命名方式
                assetFileNames:"[hash].[name].[ext]" //默认值: assets/[name]-[hash][extname]
            }
        },
        assetsInlineLimit:400, //单位b，超过这个限制的静态资源会被转化为base64
        outDir:'dist', // 默认在根目录下生成dist目录，将打包后的内容输出到dist下。这里可以设置打包生成的目录,
        assetsDir:'statics11', //默认是 [outDir配置]/assets 。经过实际测试，这里个仅仅会将打包的js文件放置在[assetsDir]目录下。如需设置其他静态资源，请示运功
        // emptyOutDir:'' //默认为true，构建之前自动清空[outDir配置]的目录
    },
    plugins:[
        // ViteAliases()
    ]
})
